var visualHUD = {
	version: 0.01,
	scaleFactor: 1,
	constructor: {},
	loadingClass: 'app-loading',
	fontToBoxSize: function(size){
		return [Math.round(104 * size) * visualHUD.scaleFactor, Math.round(36 * size) * visualHUD.scaleFactor ];
	},
	hexToQLColor: function(_hex){
		var color = $.color(_hex);
		var qlColor = [];
		for(var a = 0, b = color.rgb.length; a < b; a++){
			qlColor[a] = color.rgb[a] / 255;
			qlColor[a] = Math.floor(qlColor[a] * 100);
			qlColor[a] = qlColor[a] / 100;
		};
		return qlColor.join(' ');
	},
	convertQLColor: function(_color){
		_color = _color.split(' ');
		var rgbColor = [];
		for(var a = 0, b = _color.length; a < b; a++){
			rgbColor[a] = Math.floor(_color[a] * 255);
		};
		var color = $.color(rgbColor);
		return color;
	},
	setupToolbar: function(_toolbarUL){
		var LI = _toolbarUL.children();

		var _this = this;
		var subMenuActive = 0;
		
		var setupMenu = function(_item){
			_item.click(function(event){
			 	event.preventDefault();
				
				var activeItems = LI.filter('.active').not(_item).removeClass('active');
				_item.toggleClass('active');
				var _active = _item.hasClass('active');

				if(_active && activeItems.length == 0){
					window.setTimeout(function(){
						$('body').bind('click.hideMenu', hideMenu);
					}, 20);
				} else if(!_active && activeItems.length == 0){
					$('body').bind('click.hideMenu', hideMenu); 
				}else {
					event.stopPropagation(); // this will prevent body click.hideMenu event
				};
			});
		};

		var setupSubMenu = function(_item){
			_item.click(function(event){
				hideMenu();
				event.stopPropagation();
			});
			_item.bind('mouseover', function(event){
				event.stopPropagation();
			});			
		};
		
		var hideMenu = function(){
			LI.filter('.active').removeClass('active');
			$('body').unbind('click.hideMenu');
		};
		
		LI.each(function(){
			var $this = $(this);
			var submenu = $this.find('ul');
			
			setupMenu($this);
			setupSubMenu(submenu);
		});
	},
	getBoxGradient: function(_style, _color, _opacity){
		if(!_style) return '';
		
		var style, direction, rgba = 'rgba({0},{1})';
		var _rgb = _color.rgb.join(',');
		var gradientColors = [rgba.format(_rgb, _opacity), rgba.format(_rgb, 0)];

		_style = _style.toString();
		
		if($.browser.mozilla){
			switch(_style){
				case '1': // Top to bottom
					direction = 'center top';
					break;
				case '2': // Bottom to top
					direction = 'center bottom';
					break;
				case '3': // Left to right
					direction = 'left center';
					break;
				case '4': // Right to left
					direction = 'right center';
					break;
			};
			style = '-moz-linear-gradient('+ direction +', '+ gradientColors[0] +' 0%, '+ gradientColors[1] +' 100%)';
		} else if($.browser.webkit){
			switch(_style){
				case '1': // Top to bottom
					direction = 'left top, left bottom';
					break;
				case '2': // Bottom to top
					direction = 'left bottom, left top';
					break;
				case '3': // Left to right
					direction = 'left top, right top';
					break;
				case '4': // Right to left
					direction = 'right top, left top';
					break;
			};
			style = '-webkit-gradient(linear, '+ direction +', color-stop(0, '+ gradientColors[0] +'), color-stop(1, '+ gradientColors[1] +') )';
		} else if($.browser.msie){
			/*
				MSIE 
				----------------
				GradientType=0 - vertical gradient / top to bottom
				GradientType=1 - horisontal gradient / left to right
			*/
			
			var msieOpacity = Math.floor(_opacity * 255).toString(16);
			var solidColor = _color.hex.replace('#', '#' + msieOpacity);
			var transparentColor = _color.hex.replace('#', '#00');
			
			switch(_style){
				case '0': // Top to bottom
					direction = 0;
					gradientColors = [solidColor, solidColor];
					break;					
				case '1': // Top to bottom
					direction = 0;
					gradientColors = [solidColor, transparentColor];
					break;
				case '2': // Bottom to top
					direction = 0;
					gradientColors = [transparentColor, solidColor];
					break;
				case '3': // Left to right
					direction = 1;
					gradientColors = [solidColor, transparentColor];
					break;
				case '4': // Right to left
					direction = 1;
					gradientColors = [transparentColor, solidColor];
					break;
			};
			
			style = 'progid:DXImageTransform.Microsoft.Gradient(GradientType='+ direction +', StartColorStr="'+ gradientColors[0] +'", EndColorStr="'+ gradientColors[1] +'")';
		};
		
		return style;
	},
	getRCornersMarkup: function(box){
		var rectMatrix = {
			'3': [
				[0,		50, 	95],
				[50,	100,	100],
				[95,	100,	100]
			],
			'5': [
				[0,		0,		25, 	70, 	90],
				[0,		48,		100,	100,	100],
				[25,	100,	100,	100,	100],
				[70,	100,	100,	100,	100],
				[90,	100,	100,	100,	100]
			],
			'8' : [
				[0,		0,		0,		0,		15,		55,		80,		95],
				[0,		0,		0,		45,		95,		100,	100,	100],
				[0,		0,		70,		100,	100,	100,	100,	100],
				[0,		55,		100,	100,	100,	100,	100,	100],
				[15,	95,		100,	100,	100,	100,	100,	100],
				[55,	100,	100,	100,	100,	100,	100,	100],
				[80,	100,	100,	100,	100,	100,	100,	100],
				[95,	100,	100,	100,	100,	100,	100,	100]
			]
		};
		
		var borderRadius = parseInt(box.borderRadius);
		var baseOpacity = box.opacity;
		
		var offsets = {
			topLeft: [0,0],
			topRight: [0, box.coordinates.width - borderRadius],
			bottomLeft: [ box.coordinates.height - borderRadius, 0],
			bottomRight: [ box.coordinates.height - borderRadius,  box.coordinates.width - borderRadius]
		};
		
		var matrix = rectMatrix[borderRadius];
		
		var directionsMap = {
			'topLeft': { vertical: 1, horizontal: 1 },
			'topRight': { vertical: 1, horizontal: 0 },
			'bottomLeft': { vertical: 0, horizontal: 1 },
			'bottomRight': { vertical: 0, horizontal: 0 },
		}

		var buildCorner = function(data){
/*
		data = {
			matrix: [],
			direction: {},
			offset: []
		};
		
		direction = {
			vertical: 1 // 1 - from top to bottom, 0 - from bottom to top
			horizontal: 1 // 1 - from left to right, 0 - from right to left
		};

*/
			
			var direction = data.direction;
			var offset = data.offset;
			
			var row_matrix = [];
			var top, left, opacity;
			
			var matrix = data.matrix;
			var row_index, sub_row_index;
			
			var row_size = matrix.length;
			
			for(var x in matrix){
				x = parseInt(x);
				
				row_index = direction.vertical ? x : row_size - 1 - x
				var row = matrix[row_index];
				
				if(!row) continue;
				
				top =  offset[0] + x;
				
				var sub_row_size = row.length;
				
				for(var y in row){
					y = parseInt(y);
					
					sub_row_index = direction.horizontal ? y : sub_row_size - 1 - y
					
					var value = row[sub_row_index]
					
					if(!value) continue;
					
					left = offset[1] + y;
					
					var prevOpacity = row[direction.horizontal ? sub_row_index - 1 : sub_row_index + 1];
					
					if(prevOpacity && prevOpacity == 100) {
						row_matrix[row_matrix.length-1].width++;
					} else {
						row_matrix.push({
							top: top,
							left: left,
							width: 1,
							height: 1,
							opacity: (baseOpacity / 100) * value
						});
					}
					
				};
			}
			return row_matrix;
		};
	
		var corners = [];
		for(var k in offsets){
			$.merge(corners, buildCorner({
				matrix: rectMatrix[borderRadius],
				offset: offsets[k],
				direction: directionsMap[k]
			}));
		};

		var offsetMap = [borderRadius, 0, box.coordinates.width - borderRadius];
		
		for(var a = 0, b = 3; a < b; a++){
			corners.push({
				top: a == 0 ? 0 : borderRadius,
				left: offsetMap[a],
				width: a == 0 ? box.coordinates.width - 2 * borderRadius : borderRadius,
				height: box.coordinates.height - (a == 0 ? 0 : 2 * borderRadius),
				opacity: baseOpacity
			});
		};
		return corners;
	},
	getStartupParams: function() {
	
		var host = window.location.hostname,
			queryString = window.location.search;
	
	
		if (queryString.match('(\\?|&)large') !== null) {
			visualHUD.scaleFactor = 2;
		}
	
	}
};


visualHUD.constructor = {
	colorRangeValues: {
		'Low': [-999, 25],
		'Normal': [26,100],
		'High': [101, 999]
	},
	ammoColorRangeValues:{
		'Low': [-999, 5],
		'Normal': [6,100],
		'High': [101, 999]
	},	
	colorRangeColors:{
		'Low': 'FF0000',
		'Normal': 'FFFFFF',
		'High': 'FFFFFF'
	},
	
	simpleColorPresets: [
		'FF0000', '00FF00', 'FFFF00', '0000FF', '00FFFF', 'FF00FF', 'FFFFFF', '000000'
	],
	
	colorPresets: [
		"FFFFFF","FF8AD8","FF928A","FFBA8A","fccc30","FDFF8A","DAFF58","a1fb6e","7ff7e0","54cdf5","5ba8f5","5537ff","a053ed",
		"CCCCCC","FF00BA","FF0000","F06300","FFA000","ECF000","BBF000","56F000","00F0C1","00B4F0","0077F0","2e15f1","732fbe",
		"999999","CC0087","CC0E00","CC5400","CC7F00","C9CC00","9FCC00","4ACC00","00CCA4","0099CC","0065CC","1a05c4","501a8c",
		"666666","990066","990A00","993F00","996000","979900","789900","389900","00997B","007399","004C99","1100a0","391166",
		"333333","660043","660700","662A00","664000","646600","506600","256600","006652","004C66","003266","0c0073","250b41",
		"000000","330021","330400","331500","332000","323300","273300","123300","003329","002633","001933","060033","190033"
	],
	fn: {
		createPowerupTemplate: function(template){
			template = template.replace(/hud-item/g, 'powerup-item');
			var wrapper = '<div class="hud-item"><div class="powerups-wrapper">{0}</div>';
			template = wrapper.format(template + template);
			return template;
		},
		checkExtendedData: function(currentData, dataTemplate){
			
			return ('coordinates' in currentData);
			
			var count = 0;
			var matches = 0;
			for(var k in dataTemplate){
				count++;
				if(k in currentData) matches++;
			};
			return count == matches;
		},
		inject: function(element, dataObject, position){
			var _data = dataObject.properties;
			visualHUD.application.setupHudItem[_data.itemType](element, dataObject);

			if(_data.isSingle){
				var buttonCss = _data.cssClass;
				visualHUD.application.stageControls.find('li.' + buttonCss).addClass('disabled');
			};
						
			if(position){
				this.setElementPosition(element, position);
			} else {
				element.css({
					top: _data.coordinates.top * visualHUD.scaleFactor,
					left: _data.coordinates.left * visualHUD.scaleFactor
				});
			};
			
			element.css('visibility', '');
			
		},
		createGeneralItem: function(_data, _pos){
			var dataObject = {
				properties: $.extend({}, _data)
			};
			delete dataObject.properties.fn
			
			var colorRangeObject = _data.name.match(/armorIndicator|healthIndicator|ammoIndicator/gi);
			var ammoIndicator = _data.name.match(/ammoIndicator/gi);
			
			if(colorRangeObject && !_data.colorRanges){
				var colors = visualHUD.constructor.colorRangeColors;
				var ranges = ammoIndicator ? visualHUD.constructor.ammoColorRangeValues : visualHUD.constructor.colorRangeValues;
				dataObject.properties.colorRanges = [];
				for(var k in ranges){
					dataObject.properties.colorRanges.push({name: k, range: ranges[k], color: colors[k]});
				};
			}

			var props = dataObject.properties;
			var defaultItemData = visualHUD.constructor.itemData[_data.itemType];

			if(this.checkExtendedData(props, defaultItemData)) {
				var isPreset = true;
				defaultItemData = {};
			};
			
			$.extend(props, defaultItemData);
			
			var textbox = visualHUD.fontToBoxSize(props.textSize/100);
			var offset = visualHUD.application.hudElementsWrap.offset();
			
			var iconData = visualHUD.constructor.icons[_data.name];
			var iconURL = iconData[props.iconStyle].url;
			
			var types = {
				healthIndicator: 'statusHealth',
				armorIndicator: 'statusArmor',
				ammoIndicator: 'statusAmmo'
			};
			
			
			props.text = visualHUD.application[types[_data.name]] || props.text || visualHUD.constructor.textLabels[_data.name];
			var counterText = props.text;
			
			var htmlTemplate = visualHUD.constructor.itemHTML[_data.itemType].format(iconURL, counterText);
			
			if(_data.name == 'powerupIndicator'){
				htmlTemplate = this.createPowerupTemplate(htmlTemplate);
				var defaultPowerupData = {
					 layout: 'vertical',
					 iconSize: 24,
					 textSize: 55,
					 iconSpacing: 4
				};
				if(this.checkExtendedData(props, defaultPowerupData)){
					defaultPowerupData = {};
				};
				$.extend(props, defaultPowerupData);
			};
			
			var element = $(htmlTemplate).css('visibility', 'hidden').appendTo(visualHUD.application.hudElementsWrap);
			
			var iconBlock = element.find('div.item-icon');
			var icon = iconBlock.find('img');//.attr('src', iconURL);
			
			//$.extend(props, {icon: iconData});
			
			var textBlock = element.find('div.item-counter');
			var counter = textBlock.find('span.counter');

			dataObject.DOM = {
				iconBlock: iconBlock,
				icon: icon,
				textBlock: textBlock,
				counter: counter
			};

			this.inject(element, dataObject, _pos);
			return element;
		},

		createIconItem: function(_data, _pos){

			var dataObject = {
				properties: $.extend({}, _data)
			};
			
			delete dataObject.properties.fn
			
			var props = dataObject.properties;
			var defaultItemData = visualHUD.constructor.itemData[_data.itemType];

			if(this.checkExtendedData(props, defaultItemData)) {
				var isPreset = true;
				defaultItemData = {};
			};
			
			$.extend(props, defaultItemData);
			

			var offset = visualHUD.application.hudElementsWrap.offset();
			var htmlTemplate = visualHUD.constructor.itemHTML[_data.itemType].format('');
			
			var element = $(htmlTemplate).css('visibility', 'hidden').appendTo(visualHUD.application.hudElementsWrap);
			var iconBlock = element.find('div.item-icon');
			var icon = iconBlock.find('img');
			
			dataObject.DOM = {
				iconBlock: iconBlock,
				icon: icon
			};
		
			this.inject(element, dataObject, _pos);
			
			return element;
		},
		
		createScorebox: function(_data, _pos){
			var dataObject = {
				properties: $.extend({}, _data)
			};
			
			delete dataObject.properties.fn			
			var props = dataObject.properties;
			var defaultItemData = visualHUD.constructor.itemData[_data.itemType];
			if(this.checkExtendedData(props, defaultItemData)) {
				var isPreset = true;
				defaultItemData = {};
			};
			
			$.extend(props, defaultItemData);
		
			var htmlTemplate = visualHUD.constructor.itemHTML[_data.itemType];
			var element = $(htmlTemplate).css('visibility', 'hidden').appendTo(visualHUD.application.hudElementsWrap);
			dataObject.DOM = {};
			
			this.inject(element, dataObject, _pos);
			return element;			
		},
		createTimer: function(_data, _pos){
			return this.createGeneralItem(_data, _pos);
		},
		createArmorIndicator: function(_data, _pos){
			return this.createGeneralItem(_data, _pos);
		},
		createAmmoIndicator: function(_data, _pos){
			return this.createGeneralItem(_data, _pos);
		},
		createHealthIndicator: function(_data, _pos){
			return this.createGeneralItem(_data, _pos);
		},
		createPowerupIndicator: function(_data, _pos){
			return this.createGeneralItem(_data, _pos);
		},
		
		createCTFPowerupIndicator: function(_data, _pos){
			return this.createIconItem(_data, _pos);
		},
		
		createPlayerItem: function(_data, _pos){
			return this.createIconItem(_data, _pos);
		},
		
		createAccuracyIndicator: function(_data, _pos){
			var element = this.createGeneralItem(_data, _pos);
			element.addClass('accuracy');
			return element;
		},
		
		createObits: function(_data, _pos){
			var dataObject = {
				properties: $.extend({}, _data),
				DOM: {}
			};
			
			delete dataObject.properties.fn
			
			var props = dataObject.properties;
			var defaultItemData = visualHUD.constructor.itemData[_data.itemType];
			if(this.checkExtendedData(props, defaultItemData)) {
				var isPreset = true;
				defaultItemData = {};
			};
			
			$.extend(props, defaultItemData);

			var counterText = visualHUD.constructor.textLabels[_data.name];
			var htmlTemplate = visualHUD.constructor.itemHTML[_data.itemType].format(counterText[0], props.iconURL, counterText[1]);
			
			var element = $(htmlTemplate).css('visibility', 'hidden').appendTo(visualHUD.application.hudElementsWrap);
			dataObject.DOM.icon = element.find('img');
		
			
			this.inject(element, dataObject, _pos);
			
			
			return element;
		},
		createTextItem: function(_data, _pos){
			var dataObject = {
				properties: $.extend({}, _data),
				DOM: {}
			};
			
			delete dataObject.properties.fn
			
			var props = dataObject.properties;
			var defaultItemData = visualHUD.constructor.itemData[_data.name];
			if(this.checkExtendedData(props, defaultItemData)) {
				var isPreset = true;
				defaultItemData = {};
			};
			
			$.extend(props, defaultItemData);

			if(!_data.colorRanges){
				var colors = {
					'Low': '56F000',
					'Normal': 'ECF000',
					'High': 'CC0E00'
				};
				var ranges = {
					'Low': [0, 33],
					'Normal': [34,66],
					'High': [67, 100]
				};
				dataObject.properties.colorRanges = [];
				for(var k in ranges){
					dataObject.properties.colorRanges.push({name: k, range: ranges[k], color: colors[k]});
				};
			}
				
			var counterText = visualHUD.constructor.textLabels[_data.name];
			var htmlTemplate = visualHUD.constructor.itemHTML[_data.itemType].format(counterText[0], props.iconURL, counterText[1]);
			
			var element = $(htmlTemplate).css('visibility', 'hidden').appendTo(visualHUD.application.hudElementsWrap);

			var textBlock = element.find('div.item-counter');
			var counter = textBlock.find('span.counter');
			var text = textBlock.find('span.text');
						
			dataObject.DOM = {
				textBlock: textBlock,
				counter: counter,
				text: text
			};
			
			
			this.inject(element, dataObject, _pos);
			
			
			return element;
		},
		createFlagIndicator: function(_data, _pos){
			return this.createIconItem(_data, _pos)
		},
		createRect: function(_data, _element, _pos){			
		
			if((_data.itemType == 'bar' || _data.itemType == 'chatArea') && _element){
				var _pos = _element;
				var _element = visualHUD.application.drag.drawBox.clone().appendTo(visualHUD.application.hudElementsWrap);
			};
			
			if(!_element){
				var _element = visualHUD.application.drag.drawBox.clone().appendTo(visualHUD.application.hudElementsWrap);
			};
			
			
			var dataObject = {
				properties: $.extend({}, _data),
				DOM: {
					box: _element.find('.hud-item-box')
				}
			};

			var props = dataObject.properties;
			var defaultItemData = visualHUD.constructor.itemData[_data.itemType];
			
			if(_data.itemType == 'bar'){
				var $box = dataObject.DOM.box;
				
				$box.append('<div class="h-bar h100"><div class="h-bar h200"></div></div>');
				_element.addClass('health-bar');
				
				$.extend(dataObject.DOM, {
					h100: $box.find('div.h100'),
					h200: $box.find('div.h200')
				});
				
				visualHUD.application.hints.performanceImpact('bar indicators', 'bar');

				var types = {
					healthBar: 'statusHealth',
					armorBar: 'statusArmor',
					ammoBar: 'statusAmmo'
				};
				defaultItemData.barValue = visualHUD.application[types[_data.name]] || defaultItemData.barValue;
				
				if(!_data.colorRanges){
					var colors = visualHUD.constructor.colorRangeColors;
					var ranges = visualHUD.constructor.colorRangeValues;
					dataObject.properties.colorRanges = [];
					for(var k in ranges){
						dataObject.properties.colorRanges.push({name: k, range: ranges[k], color: colors[k]});
					};
				}
							
			};
		

			if(this.checkExtendedData(props, defaultItemData)) {
				var isPreset = true;
				defaultItemData = {};
			};
			
			$.extend(props, defaultItemData);
			
			props.width = props.width || _element.width() / visualHUD.scaleFactor;
			props.height = props.height || _element.height() / visualHUD.scaleFactor;
			
			if(!props.coordinates){
				var coordinates = _element.position();
				$.extend(props, {
					coordinates: {
						top: coordinates.top / visualHUD.scaleFactor,
						left: coordinates.left / visualHUD.scaleFactor
					}
				});
			};
			
			this.inject(_element, dataObject, _pos);
			
			return _element;
		},
		
		createChat: function(_data, _element, _pos){
			
			if(_data.isDefaultChat){
				return null;
			};
			
			var element = this.createRect.apply(this, arguments);
			var dataObject = element.data('HUDItem');
			
			var $box = dataObject.DOM.box;
			
			var charListSelector = 'chat-messages';
			
			$box.append('<ul class="'+ charListSelector +'"></ul>');
			dataObject.DOM.chatList = $box.find('ul.' + charListSelector);
			
			var listHTML = [];
			
			$.each([
					{name: '<span style="color: Cyan">n</span><span style="color: Red">a</span><span style="color: Cyan">mad</span>', message: 'quad in 30 seconds, team'},
					{name: '<span style="color: #3266fe">kN</span><span style="color: Red">a</span><span style="color: #3a63e9">kHstR</span>', message: 'WTF???'},
					'&lt;QUAKE LIVE&gt; <span style="color: Cyan">Ancest0R</span> has gone offline',
					{name: 'fatal<span style="color: Red">1</span>ty', message: 'pwned ;)'},					
					'fatal<span style="color: Red">1</span>ty connected',
					'fatal<span style="color: Red">1</span>ty entered the game',
					{name: '<span style="color: Cyan">n</span><span style="color: Red">a</span><span style="color: Cyan">mad</span>', message: 'byte my shiny metal ass!'}
				], function(idx){
					var liHTML = '<li class="message-'+ idx +'">{0}</li>';
					var messageHTML;
					if(typeof this == 'string' || this instanceof String){
						messageHTML = this;
					} else {
						messageHTML = ('<span class="name">{0}:</span><span class="message">{1}</span>').format(this.name, this.message);
					};
					
					var li = (liHTML).format(messageHTML);
					listHTML.push(li);
				});
			
			dataObject.DOM.chatList.append(listHTML.join(''));
			
			element.addClass('chat-area');
			visualHUD.application.setupHudItem[_data.itemType](element, dataObject);

			return element;
					
		},
		
		setElementPosition: function(element, _pos){
			var offset = visualHUD.application.hudElementsWrap.offset();
			element.css({
				top: Math.round(_pos.y - offset.top - element.height()/2),
				left:  Math.round(_pos.x - offset.left - element.width()/2)
			});
		}
	},
	itemData: {
		'general': {
			iconPosition: 'left',
			iconSpacing: 10,
			iconOpacity: 100,
			iconSize: 32,
			iconStyle: 0,
			textSize: 100,
			textOpacity: 100,
			textStyle: 3,
			teamColors: true
		},
		'iconItem': {
			iconStyle: 0,
			iconSize: 16,
			iconOpacity: 100
		},
		'scoreBox': {
			scoreboxStyle: 0,
			layout: 'horizontal',
			mode: 'ffa',
			spacing: 1,
			iconSpacing: 10//  horisontal || vertical
		},
		'flagIndicator':{
			iconStyle: 0,
			iconSize: 32,
			iconOpacity: 100
		},
		'obits': {
			iconStyle: 0
		},
		'rect':{
			color: 'FFFFFF',
			opacity: 100,
			width: 0,
			height: 0,
			minWidth: 1,
			minHeight: 1,
			maxWidth: 640,
			maxHeight: 480,			
			teamColors: false,
			boxStyle: 0,
			hairLine: 0,
			borderRadius: 0
		},
		'chatArea':{
			name: 'chatArea',
			coordinates: {
				top: 301,
				left: 0,
				width: 640,
				height: 120
			},
			color: '000000',
			opacity: 75,
			padding: 3,
			width: 640,
			height: 120,
			minWidth: 1,
			minHeight: 1,
			maxWidth: 640,
			maxHeight: 480,			
			boxStyle: 2,
			borderRadius: 0
		},		
		'bar': {
			color: '000000',
			opacity: 30,
			width: 100,
			height: 24,
			minWidth: 1,
			minHeight: 1,
			maxWidth: 640,
			maxHeight: 100,
			padding: 0,
			barsOpacity: 80,
			barValue: 125,
			barDirection: 0
		},
		'skillIndicator': {
			template: 'Skill rating',
			textSize: 20,
			textStyle: 0,
			textColor: 'FFFFFF',
			text: 100,
			ownerDraw: '0',
			opacity: 100
		}		
	},
	itemHTML: {
		'general': '<div class="hud-item">\
						<div class="item-icon" style="width: 32px; height: 32px;"><img src="{0}" /></div>\
						<div class="item-counter"><span class="counter">{1}</span></div>\
					</div>',
		'obits': '<div class="hud-item obit-item">\
					<div class="item-counter"><span class="counter">{0}</span></div>\
					<div class="item-icon"><img src="{1}" /></div>\
					<div class="item-counter"><span class="counter">{2}</span></div>\
				</div>',
		'iconItem': '<div class="hud-item icon-item">\
							<div class="item-icon"><img src="{0}" /></div>\
						</div>',
		'scoreBox': '<div class="hud-item scorebox-item team-score">\
							<div class="item-icon team-red"></div><div class="item-icon team-blue"></div>\
						</div>',
		'flagIndicator': '<div class="hud-item icon-item">\
							<div class="item-icon"><img src="{0}" /></div>\
						</div>',
		'textItem': '<div class="hud-item skill-item">\
					<div class="item-counter"><span class="text">{0}</span><span class="counter">{1}</span></div>\
				</div>'
	},
	icons: {
		'armorIndicator': [
			{
				name: 'QL Armor',
				url: 'resources/images/icons/armor.png'
	
			},
			{
				name: 'Q3A Armor',
				url: 'resources/images/icons/iconr_red.png'
			}
		],
		'healthIndicator': [
			{
				name: 'QL Health',
				url: 'resources/images/icons/health.png'
	
			},
			{
				name: 'Head icon',
				url: 'resources/images/icons/icon_head.png'
			}
		],		
		'ammoIndicator': [
			{
				name: 'Rocketlauncher',
				url: 'resources/images/icons/iconw_rocket.png'
			}
		],
		'powerupIndicator': [
			{
				name: 'Quad',
				url:'resources/images/icons/quad.png'
			},
			{
				name: 'Regeneration',
				url:'resources/images/icons/regen.png'
			}		
		],
		'accuracyIndicator': [
			{
				name: 'Accuracy medal',
				url:'resources/images/icons/medal_accuracy.png'
			}
		],
		'CTFPowerupIndicator': [
			{
				name: 'Scout',
				url:'resources/images/icons/scout.png'
			}
		],		
		'scoreBox': [],
		'timer': [
			{
				name: 'Clock',
				url:'resources/images/icons/icon_time.png'
			}
		],		
		'playerItem': [
			{
				name: 'Medkit',
				url:'resources/images/icons/medkit.png'
			}
		],
		'obits': [
			{
				name: 'Rocketlauncher',
				url: 'resources/images/icons/iconw_rocket.png'
			}			  
		],
		'flagIndicator': [
			{
				name: 'Flag 1',
				url:'resources/images/icons/flag.png'
			},
			{
				name: 'Flag 2',
				url:'resources/images/icons/iconf_blu1.png'
			},
			{
				name: 'Flag 3',
				url:'resources/images/icons/flag_3_1.png'
			},
			{
				name: 'Flag 4',
				url:'resources/images/icons/flag_3_2.png'
			}			
		],
		'skillIndicator': [],
	},
	textLabels: {
		'armorIndicator': '100',
		'healthIndicator': '200',		
		'ammoIndicator': '200',
		'accuracyIndicator': '100',
		'powerupIndicator': '32',
		'CTFPowerupIndicator': '',
		'scoreBox': '',
		'timer': '2:18',		
		'playerItem': '',
		'obits': ['Klesk', 'Xaero'],
		'flagIndicator': '',
		'skillIndicator': ['', '']
	}
};

visualHUD.constructor.buttons = {
	'healthIndicator': {
		'itemType': 'general',
		'cssClass': 'lib-element-health',
		'label': 'Health indicator',
		'fn': visualHUD.constructor.fn.createHealthIndicator
	},
	'healthBar': {
		'name': 'healthBar',
		'itemType': 'bar',
		'label': 'Health bar',
		'cssClass': 'lib-element-hbar',
		'fn': visualHUD.constructor.fn.createRect
	},	
	'armorIndicator': {
		'itemType': 'general',
		'cssClass': 'lib-element-armor',
		'label': 'Armor indicator',
		'fn': visualHUD.constructor.fn.createArmorIndicator
	},
	'armorBar': {
		'name': 'armorBar',
		'itemType': 'bar',
		'label': 'Armor bar',
		'cssClass': 'lib-element-abar',
		'fn': visualHUD.constructor.fn.createRect
	},	
	'ammoIndicator': {
		'itemType': 'general',
		'cssClass': 'lib-element-ammo',
		'label': 'Ammo indicator',
		'fn': visualHUD.constructor.fn.createAmmoIndicator
	},
	'timer': {
		'itemType': 'general',
		'cssClass': 'lib-element-timer',
		'label': 'Timer',
		'fn': visualHUD.constructor.fn.createTimer
	},	
	'powerupIndicator': {
		'itemType': 'general',
		'cssClass': 'lib-element-powerup',
		'label': 'Powerup timer',
		'fn': visualHUD.constructor.fn.createPowerupIndicator
	},
	'scoreBox': {
		'itemType': 'scoreBox',
		'cssClass': 'lib-element-scorebox',
		'label': 'Scorebox',
		'fn': visualHUD.constructor.fn.createScorebox
	},
	'playerItem': {
		'itemType': 'iconItem',
		'cssClass': 'lib-element-player-item',
		'label': 'Usable item indicator',
		'fn': visualHUD.constructor.fn.createPlayerItem
	},
	'CTFPowerupIndicator': {
		'itemType': 'iconItem',
		'cssClass': 'lib-element-ctf-powerup',
		'label': 'CTF powerup indicator',
		'fn': visualHUD.constructor.fn.createCTFPowerupIndicator
	},

	'obits': {
		'itemType': 'obits',
		'cssClass': 'lib-element-obit',
		'label': 'Graphical obits',
		'fn': visualHUD.constructor.fn.createObits
	},
	'flagIndicator': {
		'itemType': 'iconItem',
		'cssClass': 'lib-element-flag',
		'label': 'Flag indicator',
		'fn': visualHUD.constructor.fn.createFlagIndicator
	},
	'rectangleBox': {
		'name': 'rectangleBox',
		'itemType': 'rect',
		'label': 'Rectangle box',
		'cssClass': 'lib-element-rect hidden',	
		'fn': visualHUD.constructor.fn.createRect
	},
	'accuracyIndicator': {
		'name': 'accuracyIndicator',
		'itemType': 'general',
		'label': 'Accuracy Indicator',
		'cssClass': 'lib-element-acc',	
		'fn': visualHUD.constructor.fn.createAccuracyIndicator
	},
	'skillIndicator': {
		'name': 'skillIndicator',
		'itemType': 'textItem',
		'label': 'Skill Rating Indicator',
		'cssClass': 'lib-element-skill',	
		'fn': visualHUD.constructor.fn.createTextItem
	},
	'chatArea': {
		'name': 'chatArea',
		'itemType': 'chatArea',
		'label': 'Chat area',
		'isSingle': true,
		'cssClass': 'lib-element-chat',
		'fn': visualHUD.constructor.fn.createChat
	},		
	
};
;